<template>
  <div class="w-full">
    <van-index-bar :sticky="false" :index-list="indexList">
      <van-index-anchor index="#">热门</van-index-anchor>
      <div class="grid grid-cols-4 gap-1 px-2">
        <template v-for="(city, index) in currentGroup?.hotCities">
          <div
            class="w-8 text-center h-3 box-border leading-3 rounded-1.5xl text-[12px] bg-[rgba(255,244,236,1)] hover:bg-[rgba(255,244,236,0.5)]"
            @click="cityClick(city)"
          >
            {{ city.cityName }}
          </div>
        </template>
      </div>
      <template v-for="(item, index) in currentGroup?.cities" :key="index">
        <van-index-anchor :index="item.group" />
        <template v-for="(city, cityIndex) in item.cities" :key="cityIndex">
          <van-cell :title="city.cityName" @click="cityClick(city)" />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import useCityStore from '@/stores/modules/city'
import { useRouterStore } from '@/stores/modules/router.js'

const props = defineProps({
  currentGroup: {
    type: Object,
    default: () => {}
  }
})
const indexList = computed(() => {
  return ['#'].concat(props.currentGroup?.cities.map((item) => item.group))
})
const router = useRouter()
const cityStore = useCityStore()
const store = useRouterStore()
const cityClick = (city) => {
  cityStore.currentCity = city
  store.setRouterType('back')
  router.back()
}
</script>
<style lang="scss" scoped>
:deep(.van-index-bar__index--active) {
  color: #ff9854;
}
:deep(.van-index-anchor--sticky) {
  color: #ff9854;
}
</style>
